<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <!-- 输入框 -->
        <el-col :span="5" :offset="18">
          <el-input
            placeholder="输入借用人查找"
            clearable
            type="sousuo"
            v-model="queryInfo.query"
            @clear="getuserlist"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="search"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table
        :data="
          userlist.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        border
        stripe
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column label="设备ID" prop="equipment_id"> </el-table-column>
        <el-table-column label="设备名称" prop="equipment_name">
        </el-table-column>
        <el-table-column label="型号" prop="model"> </el-table-column>
        <el-table-column label="总数" prop="equipment_number">
        </el-table-column>
        <el-table-column label="借用人" prop="borrower_name"> </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 确认归还按钮 -->
            <el-button
              type="primary"
              size="mini"
              round
              @click="ConfirmReturn(scope.row)"
              >归还</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 确认归还信息展示 -->
      <el-dialog
        title="确认归还"
        :visible.sync="backDialogVisible"
        width="30%"
        min-height="20%"
        center
      >
        <span class="aaa">设备状况</span>
        <el-form label-width="70px" :model="equipmentList" ref="editFormref">
          <el-form-item label="设备名称" prop="equipment_name">
            <el-input
              v-model="equipmentList.equipment_name"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="型号" prop="model">
            <el-input v-model="equipmentList.model" disabled></el-input>
          </el-form-item>
          <el-form-item label="借用人" prop="borrower_name">
            <el-input v-model="equipmentList.borrower_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="设备状态" prop="info">
            <el-input v-model="equipmentList.info" disabled></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="AgreeReturn()">确认归还</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        // 搜索关键字
        query: "",
      },
      currentPage: 1,
      pageSize: 8,
      userlist: [],
      total: 0,
      backDialogVisible: false,
      RefuseReturnDialogVisible: false,
      // 借用设备信息
      equipmentList: {},
    };
  },
  created() {
    this.getuserlist();
  },
  methods: {
    async getuserlist() {
      const { data: res } = await this.$http.get(
        "/api/equipment_borrow/showall"
      );

      if (res.code !== 200) {
        return this.$message.error("获取设备信息失败！");
      }
      this.$message.success("获取设备信息成功！");
      this.userlist = res.data.data;
      this.total = res.data.data.length;
    },
    showAddDialog() {
      this.addDialogVisible = true;
    },
    // 监听  pagesize 改变的事件
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // // 监听 页码值 改变的事件
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 归还按钮
    ConfirmReturn(info) {
      this.backDialogVisible = true;
      this.equipmentList = info;
    },
    // 确认归还按钮
    async AgreeReturn() {
      const ConfirmResult = await this.$confirm(
        "此操作将确定归还请求, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (ConfirmResult !== "confirm") {
        this.backDialogVisible = false;
        return this.$message.info("已取消确定归还请求");
      }
      console.log(this.equipmentList.equipment_id);
      const { data: res } = await this.$http.post(
        "/api/equipment_return/change",
        {
          equipment_id: this.equipmentList.equipment_id,
        }
      );

      this.$message.success("归还成功！");
      this.backDialogVisible = false;
      this.getuserlist();
    },
    async search() {
      console.log(this.queryInfo.query);
      const { data: res } = await this.$http.post(
        "/api/equipment_borrow/show",
        {
          form_id: this.queryInfo.query,
        }
      );

      if (res.code !== 200) {
        return this.$message.error("查询设备失败!");
      }
      this.$message.success("查询设备成功!");
      this.userlist = res.data;
    },
  },
};
</script>

<style>
.el-button--goon {
  background: #20b2aa !important;
  color: #fafdfd !important;
  font-size: 14px !important;
}
.el-table-column {
  text-align: center;
}
.el-form-item {
  text-align: center;
}
.aaa {
  margin-bottom: 25px;
  display: block;
  text-align: center;
  font-size: 16px;
}
</style>